<template>
    <div id="box">
        <p id="title">本周农产品销量榜前5 (单位: 万元)</p>
        <div id="right-top-bar" style="width: 100%; height: 230px"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import Lodash from 'lodash'

import echarts from '@/echarts'

import { option } from './constant'
import { List } from '../../constant'
import { SaleTop } from '../../store'
import type { ItemResponse } from '../../type'

export default defineComponent({
    name: 'RightBar',
    setup() {
        const constant = {
            option
        }
        onMounted(async () => {
            let { option } = constant
            let { result: data } = await SaleTop()
            let x = data.map((item: ItemResponse) => item.name)
            let y = data.map((item: ItemResponse) => item.sales)

            option.yAxis[0].data = x
            option.yAxis[1].data = x

            option.yAxis[0].axisLabel.formatter = (value: any, index: any) => {
                if (index < 3) {
                    return `{img${index}|${x.indexOf(value) + 1}} {a|${value}}`
                } else {
                    return `{img3|${x.indexOf(value) + 1}} {a|${value}}`
                }
            }
            option.yAxis[1].axisLabel.formatter = (value: any, index: any) => {
                return `{a|${y[x.indexOf(value)]}}`
            }

            option.series[0].data = y
            option.series[1].data = y

            echarts.init(document.getElementById('right-top-bar')).setOption(option)
        })
        return {
            ...constant
        }
    }
})
</script>
<style lang="scss" scoped>
.box {
    height: 280px;
    padding: 0;
}
#title {
    height: 50px;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
